<template>
	<view v-if="data">
		<!-- 小说详情页 -->
		<!-- 自定义导航 -->
		<uni-nav-bar backgroundColor="#ee696e" fixed :border="false" @clickLeft="backTo()" statusBar>
			<view slot="left" class="top-ico"><uni-icons type="left" size="26" color="#fff"></uni-icons></view>
			<view slot="right">
				<uni-icons
					custom-prefix="iconfont"
					type="icon-erji"
					size="26"
					color="#fff"
					style="margin-right: 20rpx;"
				></uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-fenxiang" size="26" color="#fff"></uni-icons>
			</view>
		</uni-nav-bar>
		<!-- 基本信息 -->
		<view class="message">
			<view>
				<view>{{ data.name }}</view>
				<!-- 作者 -->
				<view>{{ data.author }}</view>
				<!-- 评分 -->
				<view><uni-rate :size="18" readonly :value="data.score / 2" allowHalf /></view>
				<!-- 关键词 -->
				<view class="tags" v-if="tags">
					<view v-for="(item, index) in tags" :key="index">{{ item }}</view>
				</view>
				<!-- 分类·字数·是否完结 -->
				<view>
					{{ data.min }}
					<span>·</span>
					{{ data.wordCounts }}字
					<span>·</span>
					{{ data.isSerial == 0 ? '连载中' : '完结' }}
				</view>
			</view>
			<!-- 封面 -->
			<view><image class="cover" :src="data.cover" mode="widthFix"></image></view>
		</view>
		<!-- 数据 -->
		<view class="data">
			<view>
				<view>{{ data.people_counts }}</view>
				<view>追书人数</view>
			</view>
			<view>
				<view>{{ data.Retention_rate }}%</view>
				<view>用户留存率</view>
			</view>
			<view>
				<view>{{ data.daily_counts }}</view>
				<view>日更新字数</view>
			</view>
			<view class="line"></view>
		</view>
		<!-- 书籍简介 -->
		<view class="introduction">
			<view>书籍简介</view>
			<view>{{ data.desc }}</view>
		</view>
		<!-- 精彩评论 -->
		<view style="padding: 0 40rpx ;">
			<view class="title">精彩评论</view>
			<view>
				<!-- 一条评论 -->
				<view v-for="(item, index) in 3" :key="index">
					<view class="user">
						<image src="../../static/avatar.jpg"></image>
						<view style="font-weight: 600;">刹那尘埃</view>
					</view>
					<view class="recommend">
						昨日新作！对于听日的脑洞和诡异的角度，我从未失望！这本依然如是。开局穿越，脚下是无数匍匐膜拜的信徒，身上时四位神身上时四位神身上时四位神身上时四位神身上时四位神身上时四位神身上时四位神身上时四位神
					</view>
				</view>
			</view>
		</view>
		<!-- 试读 -->
		<view style="padding-bottom: 52px;">
			<view class="content">
				<view class="tag">章节试读</view>
				<template>
					<view class="try" v-html="data.try"></view>
					<!-- <view class="title">第一章：荒之陆</view>
					<view
						:class="{ 'line-clamp': !isOpen }"
					><view class="inner-text"><p>　　中古时代，夜晚一片黑暗，无数繁星点缀在这片大陆，偶尔一颗流星一闪而过，风声在空中发出回荡，远处的兽声不时的一阵嘶吼</p><p>　　在荒之陆一角，有一处繁茂的森林。在森林西方之地生活着许多普遍未开智的人类</p><p>　　森林郁郁葱葱，远远的看去黑压压的，一缕缕金色的光芒偶尔透过密密麻麻树叶的缝隙照射在大地上</p><p>　　一头角虎悠哉悠哉的在森林里闲逛着</p><p>　　微风轻轻吹过使得角虎懒洋洋的昏昏欲睡</p><p>　　深处，有人类静悄悄的埋伏在灌木丛里，角虎丝毫没有意识到危险的存在</p><p>　　只见角虎慢慢悠悠的走进他们的埋伏圈</p><p>　　随着人类首领的一声令下</p><p>　　有族人长矛飞出也有族人手持骨刺与角虎搏斗</p><p>　　随着给野兽致命一击，这场战斗此时也渐渐的落下帷幕</p><p>　　荒之陆，大多数部落使用的武器是野兽骨头做成的骨刺或者自己用锋利石头绑在棍子上的长矛</p><p>　　“岳璃，把野兽的四肢用树藤绑好。”</p><p>　　队伍中漠庆对着一个还没有成年的小孩道</p><p>　　这是队伍中唯一一个还没有成年的小孩，他叫岳璃</p><p>　　大多部落中未成年的孩子是不允许随部落打猎的</p><p>　　未成年代表身体还没有完全发育，力量太弱，在森林中很危险</p><p>　　岳璃之所以现在这个年纪就可以在外面狩猎，因为岳璃是先天天赋的智人</p><p>　　创建小部落的首领叫做岳山</p><p>　　岳璃是天生的先天智人，是百万人类中才出一个的天才</p><p>　　森林很大，整个荒之陆被森林出东南西北四个方向</p><p>　　在东西南北四个方向有着数不清的部落</p><p>　　荒之陆，先天智人却是不多，岳山不愿让先天智人的岳璃未来局限于这块地方</p><p>　　岳璃现在还年幼，童真，童稚的声音中带着几分懒洋洋的道</p><p>　　“漠叔，知道了。”</p><p>　　少年岳璃使出吃奶的劲才勉强把野兽绑好</p><p>　　看着被五花大绑的野兽父亲岳山哭笑不得</p><p>　　“父亲我们是不是要回去了。”岳璃满脸的期待</p><p>　　漠庆笑呵呵的道：“这么着急回去，害怕了？”</p><p>　　岳璃小脸上嘟着嘴：“小红红想我了，我得赶紧回去。”</p><p>　　小红红是漠平的女儿</p><p>　　年龄与岳璃相当，岳璃还不曾跟随部落打猎时，两人形影不离</p><p>　　族人取笑道：“岳璃你长大了让小红红给你当老婆好不好。”</p><p>　　岳璃单纯的看着这些大叔嫌弃到：“一个不够，我要好多个老婆。”</p><p>　　漠庆脸色黑了下来，咬牙切齿的道：“这个小畜生，以后得让丫头离他远一点。”</p><p>　　众人大笑，有了岳璃的存在，整个队伍多了许多欢乐</p><p>　　随着岳一声令下，众人满载而归回到部落</p><p>　　大陆上的部落都是以首领名字命名的</p><p>　　岳山部落是岳璃的父亲岳山创建的，这个小部落就是岳山部落</p><p>　　在这个荒芜的时代，人类性格很是豪爽，做事不拘一格，对于部落的名字定义还是从远古一代一代的传下来的，不曾改变</p><p>　　众人离开森林带着满载而归的食物回到岳山部落</p><p>　　岳山部落生存为森林的极西之地，与外界隔绝</p><p>　　极西之地是最神秘的也是是文明进化程度普遍较低的区域，众多小部落聚集最多的区域</p><p>　　这个区域只有一个大部落，拓跋部落</p><p>　　拓跋部落地盘极大，甚至现在很多生存小部落族人的地方都是拓跋部落的领地</p><p>　　这个区域只有一个大部落而且领地极其的巨大，拓跋部落对于领地内驻扎的小部落也是睁一眼闭一眼</p><p>　　岳山部落属于小部落，岳山部落的领地是一座大山，数千族人生活在这座大山上</p><p>      　　山上一排排的洞穴就是族人晚上居住的地方，山腰上有一处突出来平整的广场便是在这座山上岳山与岳璃生活的地方，山角下有一处巨大的平地这也是岳山的领地，那是岳山部落族人平时吃饭玩乐的地方</p><p>　　“璃哥哥回来了，我要去找璃哥哥。”身穿兽皮的小红红蹦蹦跳跳来到山脚下，四处张望</p><p>　　“小红红，你是不是在找我呀？”岳璃的双眉跳起了眉毛舞</p><p>　　“璃哥哥你瘦了，我听母亲说，外面很危险的。”小红红一脸的担忧</p><p>　　“外面很精彩，看那头角虎没，我杀的，之前还碰到一头猛象，幸好那个畜牲跑的快，不然我一拳头就能把他打趴。”岳璃很是不要脸的说道</p><p>　　小红红眼冒金星：“璃哥哥你太厉害了，下一次我们一起去杀猛象好不好。”</p><p>　　岳璃心虚</p><p>　　“好说，好说。”打着哈哈一直点头表示认同</p><p>　　忙碌几天，岳璃年纪还小累坏了，回到洞穴美美打睡了一觉，直到有族人叫醒岳璃让去吃饭</p><p>　　晚上的山脚，灯火通明，部落的族人都是山脚享用食物</p><p>　　“呦，我们的大英雄回来了。”漠瑾看着迷迷糊糊走来的璃不冷不淡的道</p><p>　　岳璃也不计较打着哈哈道：“是呀，是呀。”</p><p>　　漠瑾不喜欢岳璃死猪不怕开水烫的样子，不过也习惯了</p><p>　　漠瑾是小红红的大哥，两人是同一年生的却不是一个母亲</p><p>　　岳璃看在小红红的面子上也不喜欢给漠瑾计较</p><p>　　路风是岳璃的忠实粉丝，路风的智商实在不怎么高，岳璃看到路风跑过来，心中总想着</p><p>　　这个傻乎乎的大个以后我当首领了该让他做什么好呢，很苦恼</p><p>　　路风老远就看到了岳璃，嘴角的那高兴劲明晃晃的，还没到跟前就听到路风大大咧咧的道：</p><p>　　“璃哥，这一路我都听我爹讲了，你真的是太厉害了，我爹说你绑野兽可有一套了。”</p><p>　　岳璃带笑的嘴角不自觉的抽搐了一下，最后一头角虎就是他绑的，此时那头保护就在不远处</p><p>      　　树藤缠绕在角虎的肚子上，角虎的前腿用树藤连接着后退，角虎的头皮是用树藤绑好的蝴蝶结，这也是难为后面抬角虎的族人了，路风的爹正好是抬角虎的</p><p>　　岳璃一看到角虎还没有扒皮抽筋，不由得恼羞成怒</p><p>　　“这角虎怎么还在这里，本璃今天想吃它了，赶紧炖了。”</p><p>　　漠瑾忍俊不禁的道：“这角虎吃了可惜了。”</p><p>　　做饭的厨子应声说好，临走的时候厨子嘟囔道：“这野兽绑的如此奇特，我还以为是要当礼物送出去呢。”</p><p>　　岳璃心中一阵的恼羞成怒</p></view></view>
					 -->
				</template>
			</view>
			<view class="more">
				<image v-if="!isOpen" @click="displayMore()" src="../../static/xuanzeqizhankai.png"></image>
				<view v-else>继续阅读</view>
			</view>
		</view>
		<!-- 底部状态栏 -->
		<view class="tabnav">
			<view @click="addToBookshelf()">
				<uni-icons custom-prefix="iconfont" type="icon-jiarushujia" size="26"></uni-icons>
				<view>加入书架</view>
			</view>
			<view>开始阅读</view>
			<view>
				<uni-icons type="download" size="26"></uni-icons>
				<view>下载</view>
			</view>
		</view>
		<!-- 回到顶部按钮 -->
		<view class="fab" v-show="showFab" @click="scrollToTop()">
			<uni-icons type="arrow-up" color="#fff" size="36"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
export default {
	data() {
		return {
			isOpen: false, //章节内容是否展开
			showFab: false, //悬浮按钮的显示与隐藏
			data: {},
			tags: []
		};
	},
	computed: {
		...mapState(['user','isLogin'])
	},
	methods: {
		// 获取页面数据
		getData(id) {
			uni.request({
				url: `${getApp().globalData.baseURL}/v1/novel/book/${id}`,
				success: res => {
					console.log(res.data.data);
					this.data = res.data.data[0];
					if (res.data.data[0].keywords) {
						this.tags = res.data.data[0].keywords.split(' ');
						// console.log(this.tags)
					}
				}
			});
		},
		// 返回上一页
		backTo() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 章节试读显示更多
		displayMore() {
			this.isOpen = !this.isOpen;
		},
		scrollToTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		// 加入书架
		addToBookshelf(){
			// 登录才可加入书架
			if(!this.isLogin){
				uni.showToast({
					title: '登录后可加入书架',
					icon: 'none',
					duration: 2500
				})
				return
			}
			let nid=this.data.id
			let uid=this.user.id
			console.log(nid,uid)
			uni.request({
				url:`${getApp().globalData.baseURL}/v1/user/add`,
				data:{nid,uid},
				method:'POST',
				header:{
					'content-type':'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res)
					if(res.data.code==200){
						uni.showToast({
							title: '加入书架成功',
							icon: 'none',
							duration: 1000
						})
					}
				}
			})
		}
	},
	// 监听页面滚动
	onPageScroll(e) {
		this.showFab = e.scrollTop > 900;
	},
	// 页面加载
	onLoad(option) {
		console.log(option);
		this.getData(option.id);
	}
};
</script>

<style lang="scss" scoped>
// 悬浮按钮
.fab {
	position: fixed;
	right: 30rpx;
	bottom: 140rpx;
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	box-shadow: 0 1px 8px 1px rgba(165, 165, 165, 20%);
	background-color: #ccc;
	text-align: center;
	line-height: 110rpx;
}

// 导航栏图标
.top-ico {
	display: flex;
	align-items: center;
}
// 小说基本信息
.message {
	padding: 40rpx 40rpx 70rpx;
	color: #fff;
	background-color: #ee696e;
	display: flex;
	justify-content: space-between;
	> view:first-child {
		> view {
			margin: 10rpx 0;
		}
		> view:first-child {
			font-size: 42rpx;
		}
		> view:last-child {
			> span {
				margin: 0 10rpx;
			}
		}
	}
}
.tags {
	display: flex;
	> view {
		padding: 0 14rpx;
		background-color: #fff;
		color: #ee696e;
		font-size: 22rpx;
		margin-right: 8rpx;
		border-radius: 6rpx;
	}
}
// 图书封面
.cover {
	width: 180rpx;
	border-radius: 0 10rpx 10rpx 0;
}
// 小说数据
.data {
	margin-top: -40rpx;
	padding: 40rpx;
	border-radius: 40rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	> view {
		text-align: center;
		> view:first-child {
			font-size: 42rpx;
			font-weight: 600;
		}
		> view:last-child {
			color: #999;
			font-size: 26rpx;
		}
	}
	.line {
		width: 700rpx;
		height: 1px;
		background-color: #ccc;
		position: absolute;
		bottom: 16rpx;
	}
}
// 底部状态栏
.tabnav {
	width: 100%;
	height: 52px;
	position: fixed;
	background-color: #fff;
	box-sizing: border-box;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	bottom: 0;
	padding: 20rpx 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex: 1;
	> view:first-child {
		display: flex;
		> view {
			font-weight: 600;
		}
	}
	> view:nth-child(2) {
		padding: 16rpx 80rpx;
		border-radius: 38rpx;
		background-color: #ff604f;
		color: #fff;
		font-size: 32rpx;
	}
	> view:last-child {
		display: flex;
		> view {
			font-weight: 600;
		}
	}
	.uni-icons {
		margin-right: 10rpx;
	}
}
// 书籍简介
.introduction {
	padding: 0 40rpx 10rpx;
	// width: 100%;
	> view:first-child {
		margin: 20rpx 0;
		font-size: 40rpx;
		font-weight: 600;
	}
	> view:last-child {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
	}
}
// 评论
.title {
	padding-top: 20rpx;
	font-size: 40rpx;
	font-weight: 600;
}
.user {
	display: flex;
	justify-content: start;
	align-items: center;
}

.user image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: block;
	margin: 20rpx;
	margin-left: 0;
}

.recommend {
	margin: 0 20rpx 0 100rpx;
	padding-bottom: 10rpx;
	font-size: 0.9em;
	color: #03071e;
	line-height: 2em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	border-bottom: 1px solid #e6e9f0;
}

/* 章节试读 */
.content {
	padding: 0 30rpx;
	background-color: #f6f7fb;
}

.content .tag {
	color: white;
	font-size: 0.9em;
	font-weight: 600;
	width: 160rpx;
	padding: 10rpx;
	background-color: #27292a;
	background-image: linear-gradient(180deg, #27292a 40%, #8f8f89 100%);
	text-align: center;
	border-radius: 0 0 10rpx 10rpx;
}

.content .title {
	font-weight: 600;
	margin: 12rpx 0;
}

.content text {
	line-height: 2em;
}

.more {
	padding: 20rpx 0;
	box-shadow: 0 -40px 20px -10px rgb(246, 247, 251);
	background-color: #f6f7fb;
	display: flex;
	justify-content: center;
}
.more image {
	width: 50rpx;
	height: 50rpx;
	display: block;
}
.more view {
	width: 140rpx;
	height: 50rpx;
	font-size: 0.9em;
	line-height: 50rpx;
	color: #666;
	border: 1px solid #666;
	text-align: center;
	padding: 10rpx;
}
// 试读
.try /deep/.inner-text {
	> p {
		text-indent: 2em;
	}
}
.try {
	margin-top: 20rpx;
}
.try /deep/ .title {
	font-size: 40rpx;
	font-weight: 600;
}
.try /deep/ .line-clamp {
	overflow: hidden;
	text-overflow: clip;
	display: -webkit-box;
	-webkit-line-clamp: 9;
	line-clamp: 9;
	-webkit-box-orient: vertical;
}
</style>
